<template>
	<view class="content1">
		<view class="imgv">
			<image class="logo-img" src="@/static/img/icon_@3x.png"></image>
		</view>
		<view class="input-group">
			<view class="input-row border">
				<m-input type="text" clearable v-model="mobile" placeholder="请输入手机号"></m-input>
			</view>
			<!-- <view class="input-row border">
				<m-input type="password" displayable v-model="password" placeholder="请输入密码"></m-input>
			</view> -->
			<view v-if="needCaptcha" class="input-row border">
				<!-- <text class="title">验证码：</text> -->
				<m-input type="text" v-model="password" placeholder="请输入验证码"></m-input>
				<button @click="getCode">{{codeText}}</button>
				<!-- <view class="send-code-btn captcha-view" @click="captcha('refreshCaptcha')">
					<i v-if="captchaing" class="uni-icon_toast uni-loading"></i>
					<img v-if="!captchaing" :src="captchaBase64" width="100%" height="100%"></img>
				</view> -->
			</view>
			<view class="btn-row">
				<button type="primary" class="primary" :loading="loginBtnLoading" @tap="loginByPwd">登录</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		loginV1,
		getPermissionInfo,
		sendSmsVerifyCode
	} from '@/api/user.js'

	export default {
		data() {
			return {
				mobile: '',
				password: '',
				loginBtnLoading: false,
				needCaptcha: true,
				captchaing: false,
				captchaBase64: '',
				captchaText: '',
				//验证码
				codeText: '获取验证码',
				//验证码已发
				readonly: false,
			}
		},
		onLoad() {

		},
		methods: {
			getCode() {
				if (this.readonly) {
					uni.showToast({
						title: '验证码已发送',
						icon: 'none'
					});
					return;
				}
				this.getCodeState();
			},
			async getCodeState() {
				
				const _this = this;
				this.readonly = true;
				this.codeText = '60S后重新获取';
				var s = 60;
				const clear = setInterval(() => {
					s--;
					_this.codeText = s + 'S后重新获取';
					if (s <= 0) {
						clearInterval(clear);
						_this.codeText = '获取验证码';
						_this.readonly = false;
					}
				}, 1000);
				
				const res = await sendSmsVerifyCode({
					phone:this.mobile
				})
				
				

			},
			
			async loginByPwd() {
				if (this.mobile.length < 1) {
					uni.showToast({
						icon: 'none',
						title: '账号最短为 1 个字符'
					});
					return;
				}
				if (this.password.length < 1) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 1 个字符'
					});
					return;
				}

				const data = {
					phone: this.mobile,
					verifyCode: this.password
				};
				this.loginBtnLoading = true
				var res = null;
				// try {
					res = await loginV1({
						params: data
					});
					// debugger
					uni.setStorageSync('Token', res.data.htoken)
					uni.setStorageSync('userInfo', res.data)
					uni.setStorageSync('roleType', res.data.roleType)
					
					// avatarUrl: "string"
					// deptName: null
					// htoken: "Bs_2M95yL8ZFs82HX_DaA6aTbL01MArdlI__"
					// phone: "18695801820"
					// roleType: null
					// userName: "超哥"
					// wxUserId: "1810874774579933185"
					
					uni.switchTab({
						url: '../index/index',
					});
					// var permissionInfo = await getPermissionInfo({
					// 	data: {}
					// })
					// uni.setStorageSync('username', permissionInfo.data.username)
					// uni.setStorageSync('nickname', permissionInfo.data.nickname)
					// uni.setStorageSync('avatar', permissionInfo.data.avatar)
					// uni.setStorageSync('id', permissionInfo.data.id)

					// this.$http({
					// 	url: '/login',
					// 	data: {
					// 		terminal: 1, // APP终端
					// 		userName: permissionInfo.data.username,
					// 		password: '1'
					// 	},
					// 	method: 'POST'
					// }).then(data => {
					// 	console.log("登录成功,自动跳转到聊天页面...")
					// 	uni.setStorageSync("loginInfo", data);
					// 	// 调用App.vue的初始化方法
					// 	getApp().init()
					// 	// 跳转到首页
					// 	uni.switchTab({
					// 		url: '../index/index',
					// 	});
					// })



				// } catch (err) {
				// 	console.log(err)
				// }
				this.loginBtnLoading = false;

			},


			loginLocal(nickName) {
				uni.setStorageSync('login_type', 'local')
				uni.setStorageSync('username', nickName)
				this.toMain(nickName);
			},
			toMain(userName) {
				this.login(userName);
				/**
				 * 强制登录时使用reLaunch方式跳转过来
				 * 返回首页也使用reLaunch方式
				 */
				uni.reLaunch({
					url: '../index/index',
				});
			}
		},
		onReady() {

		}
	}
</script>

<style>
	.content1 {
		display: flex;
		flex: 1;
		flex-direction: column;
		background: #FFFFFF;
		width: 100%;
		overflow-x: hidden;
	}

	.imgv {

		width: 100%;

		margin: 0 auto;
		display: flex;
		justify-self: center;
		align-items: center;
		margin: 80rpx 0;
	}

	.logo-img {
		width: 120rpx;
		height: 120rpx;
		display: inline-block;
		border-radius: 10px;
		margin: 0 auto;
	}

	.input-group {
		background-color: #ffffff;

		position: relative;
		width: 610rpx;

		margin: 0 auto;
	}

	.input-group::before {
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #FFFFFF;
	}

	.input-group::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.tit1 {
		color: #333333;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 17px;
		line-height: normal;
		letter-spacing: 1px;
		text-align: center;
		margin-bottom: 4px;
	}

	.tit2 {
		color: #999999;
		font-family: PingFang SC;
		font-weight: medium;
		font-size: 12px;
		line-height: normal;
		letter-spacing: 4px;
		text-align: center;
	}

	.input-row {
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		position: relative;
		width: 610rpx;
		max-width: 460px;
		height: 51.5px;
		line-height: 40px;
	}

	.input-row.border::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0px;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.btn-row {
		margin-top: 0px;
		border-radius: 4px;
	}

	button.primary {
		margin-top: 30rpx;
		max-width: 460px;
		background: #3B88F5;
		width: 610rpx;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 15px;
		line-height: 45px;
		max-height: 45px;
		letter-spacing: 0px;
		text-align: center;

	}

	button.primarywx {
		margin-top: 30rpx;

		max-width: 460px;
		background: #53B821;
		width: 610rpx;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: medium;
		font-size: 15px;
		line-height: 45px;
		max-height: 45px;
		letter-spacing: 0px;
		text-align: center;

	}

	.action-row {
		padding-left: 350rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		margin-left: auto;

	}

	.action-row navigator {
		color: #999999;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 12px;
		line-height: normal;
		letter-spacing: 0px;
		text-align: right;
	}

	.oauth-row {
		display: flex;
		flex-direction: row;
		/* align-items: center; */
		justify-content: space-around;
		flex-wrap: wrap;
		position: absolute;
		top: 0;
		left: 0;
		margin: 0 140rpx;
		/* width: 100%; */
	}

	.other {
		color: #999999;
		font-family: PingFang SC;
		font-weight: medium;
		font-size: 12px;
		line-height: normal;
		letter-spacing: 0px;
		text-align: center;
		width: 100%;
		padding-bottom: 20px;
		padding-left: 20rpx;
	}

	.oauth-image {
		position: relative;
		width: 98rpx;
		height: 98rpx;
		/* border: 1px solid #dddddd;
		border-radius: 50px;
		background-color: #ffffff; */
	}

	.oauth-image image {
		width: 98rpx;
		height: 98rpx;
		margin: 20rpx;
	}

	.oauth-image button {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}

	.send-code-btn {
		width: 120px;
		text-align: right;
		color: #2D89E5;
		padding-top: 12rpx;
	}

	.captcha-view {
		line-height: 0;
		justify-content: center;
		align-items: center;
		display: flex;
		position: relative;
		background-color: #f3f3f3;
	}
</style>